<template>
	<view class="main">
		<view class="bg-white margin-sm" style="border-radius: 16px;">
			<view class="header text-center">
				<image mode="aspectFit" src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/play_folk_guitar.png" />
			</view>
			<view class="uni-padding-wrap uni-common-mt padding-xl">
				<view class="text-box" scroll-y="true">
					<text>民谣吉他。吉他学习容易，练好难。就像敲代码一样，需要花时间大量的练习。\n\n</text>
					<text>介绍下民谣吉他的几个牌子:</text>
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in guitarBrand" :key="index" @tap="tabSelect" :data-id="index">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<view class="tab-taylor" v-show="TabCur === 0">
				<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
				 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
				 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
						<view class="swiper-item">
							<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
							<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
						</view>
					</swiper-item>
				</swiper>
				<view class="cu-bar bg-white">
					<view class="text-box padding-xl" scroll-y="true">
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								<text class="cuIcon-title text-orange"></text> Taylor系列:
							</view>
						</view>
						<view class="margin-top">
							<text>
								泰勒公司的产品向来以独特的设计、精良的做工，与优质材料而闻名，这些已被广泛认同的特点，
								都为它贴上了华美且高价的标签。\n
								从100系列到900系列，价格都是蹭蹭的往上涨，当然价格越贵好。（金钱的香气）。
							</text>
						</view>
						<view  class="margin-top text-center">
							<image 
								src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/Taylor-914ce-v.png" 
								style="width: 40%;"
							>
							</image>
						</view>
						<view class="margin-top">
							Taylor900系列这样的桶形真的很喜欢~但是价格嘛。。\n
						</view>
					</view>
				</view>	
			</view>
			
			<view class="tab-martin" v-show="TabCur === 1">
				<view class="cu-bar bg-white">
					<view class="text-box padding-xl" scroll-y="true">
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								<text class="cuIcon-title text-orange"></text> Martin系列:
							</view>
						</view>
						<view class="margin-top">
							<text>马丁吉他</text>
						</view>
					</view>
				</view>				
			</view>
			<view class="tab-lakewood" v-show="TabCur === 2">
				<view class="cu-bar bg-white">
					<view class="text-box padding-xl" scroll-y="true">
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								<text class="cuIcon-title text-orange"></text> Lakewood系列:
							</view>
						</view>
						<view class="margin-top">
							<text class="margin-top">Lakewood这个系列的琴，感觉很吃基本功的，右手音色的控制的功夫不到家还是弹不出味道，这个琴很适合分解，细节很多吃操作。
							个人感觉主要靠郑成河代言火起来的，品牌认可度相对低一些，当然每个牌子都有自己的特色。</text>
						</view>
					</view>
				</view>				
			</view>
			
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				guitarBrand: [{
					name: 'Taylor'
				},{
					name: 'Martin'
				},{
					name: 'Lakewood'
				}
				],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/taylor-110ce.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/taylor-714ce.jpg'				
				}, {
					id: 2,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/taylor-814ce.jpg',			
				}, {
					id: 3,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/taylor-514ce.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/taylor-914ce.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/guitars-PS14ce.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/taylor/taylor-GS-mini.jpg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				TabCur: 0
			}
		},
		onLoad() {
			console.log('加载中')
			uni.showLoading({
			    title: '加载中'
			});
		},
		onReady() {
			uni.hideLoading();
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			tabSelect(e) {
				console.log(this.TabCur)
				this.TabCur = e.currentTarget.dataset.id;
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: '视频加载错误' + e.target.errMsg,
					showCancel: false
				})
			}
		}
	}
</script>

<style>
.card-swiper swiper-item {
	left: 52rpx;
}

#myVideo {
	width: 100%;
}
</style>
